<template>
 <div style="height: 500px;">
  <el-upload

   v-show="false"
   id="quill-upload"
   :action="serverUrl"
   name="file"
   multiple
   :limit="10"
   list-type="picture"
   :show-file-list="false"
   :before-upload="beforeUpload"
   :on-error="uploadError"
   :on-success="handleExceed">
   <el-button size="small" type="primary" ></el-button>
   <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
  <el-row v-loading="uillUpdateImg">
   <quillEditor style="height: 400px;"
    ref="myQuillEditor"
    @change="onEditorChange($event)"
    v-model="value"
    :options="editorOption"/>
  </el-row>
 </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
 name: "richText",
 components:{quillEditor},
 data(){
  return{
   serverUrl: 'http://47.99.48.208/api/file_upload', //上传的图片服务器地址
   uillUpdateImg:false,            //根据图片上传状态来确定是否显示loading动画
   value: '',             //富文本内容
   editorOption: {               //符文本编辑器的配置
    placeholder: '',
    theme: 'snow',
    modules: {
     toolbar: {
      container: [             // 工具栏配置, 默认是全部
       ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
       ['blockquote', 'code-block'],

       [{'header': 1}, {'header': 2}],               // custom button values
       [{'list': 'ordered'}, {'list': 'bullet'}],
       [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
       [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
       [{'direction': 'rtl'}],                         // text direction

       [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
       [{'header': [1, 2, 3, 4, 5, 6, false]}],

       [{'color': []}, {'background': []}],          // dropdown with defaults from theme
       [{'font': []}],
       [{'align': []}],
       ['link', 'image'],
       ['clean']
      ],
      handlers: {
       'image': function (value) {
        if (value) {
         // 给个点击触发Element-ui，input框选择图片文件
         document.querySelector('#quill-upload input').click()
        } else {
         this.quill.format('image', false);
        }
       }
      }
     }
    }
   }
  }
 },
 methods:{
  onEditorChange({ quill, html, text }) {   //富文本编辑器内容发生改变的时候
   this.value = html
   this.$emit('textChange',html)       //将富文本编辑器输入的文本发送给父组件，父组件涉及提交添加或者更改
  },
  beforeUpload(){               //上传图片之前开启loading
   this.uillUpdateImg = true
  },
  uploadError(){               //图片上传失败,关闭loading
   this.uillUpdateImg = false
   this.$message.error('图片插入失败')
  },
  handleExceed(response, file, fileList){   //图片添加成功
   let quill = this.$refs.myQuillEditor.quill
   if (response.code === 200) {
    let length = quill.getSelection(true).index;
    // 插入图片 response.data.url为服务器返回的图片地址
    quill.insertEmbed(length, 'image', response.data.path)
    // 调整光标到最后
    quill.setSelection(length + 1)
   }else{
    this.$message.error('图片插入失败')
   }
   this.fileList = fileList
   this.uillUpdateImg = false
  },
 }
}
</script>
<style>
.quillEditor{
   width: 50%;
   height: 700px;
}
</style>
